import React from 'react'
import {
  AppstoreOutlined,
  MailOutlined,
  SettingOutlined,
} from '@ant-design/icons'
import { useNavigate, NavLink } from 'react-router-dom'
import type { MenuProps } from 'antd'
import { Menu } from 'antd'

type MenuItem = Required<MenuProps>['items'][number]

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group'
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem
}

const demo1 = [
  {
    id: '1',
    path: '/basic/counter',
    text: 'counter',
  },
  {
    id: '2',
    path: '/basic/dashboard',
    text: '仪表盘',
  },
  {
    id: '3',
    path: '/basic/Cart',
    text: '购物车',
  },
  {
    id: '4',
    path: '/basic/Book',
    text: '书城',
  },
]

interface MenuSliderProps {
  routes?: any[]
}

const MenuSlider: React.FC<MenuSliderProps> = (props) => {
  const { routes } = props
  const createGetItem: any = (list: any[]) => {
    if (list) {
      return (
        list?.length &&
        list.map((item: any) => {
          return getItem(
            <NavLink to={item.path}>{item.text}</NavLink>,
            item.id,
            <MailOutlined />
          )
        })
      )
    } else {
      return getItem('仪表盘', '1', <MailOutlined />)
    }
  }

  const items = [
    getItem('标题一', 'sub1', <MailOutlined />, createGetItem(routes)),
  ]

  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e)
  }

  return (
    <Menu
      onClick={onClick}
      style={{ width: '100%' }}
      defaultSelectedKeys={['1']}
      // defaultOpenKeys={['sub1']}
      mode="inline"
      items={items}
    />
  )
}

export default MenuSlider
